<template>
    <div class="company">
      <a-row>
        <a-col>
          <h3>
            <i class="fa fa-building" />
            <span style="margin-left: 8px;margin-right: 8px; font-weight: bold;font-size: 16px;">{{ $t("ServiceOrder") }}</span>
          </h3>
        </a-col>
      </a-row>
      <a-row style="margin-top: 16px;">
        <a-col :span="12" style="display: flex;">
          <a-button style="margin-right: 8px;font-size: 12px;" v-permission="['createFlag']" @click="onAddClick"><i class="fa fa-plus" /><span  style="margin-left: 4px;margin-right: 4px;">{{ $t("add") }}</span></a-button>
          <a-button style="margin-right: 8px;font-size: 12px;" @click="handleFlush"><i class="fa fa-sync" /><span  style="margin-left: 4px;margin-right: 4px;">{{ $t("refresh") }}</span></a-button>
          <a-input-group compact style="margin-right: 8px;">
            <a-input style="width: 200px;" v-model:value="queryParam.keyword" :placeholder="`${$t('search')}...`" allowClear @pressEnter="onSearch"/>
            <a-button type="" class="search" @click="onSearch"><i class="fa fa-search-plus" /><span style="margin-left: 4px;margin-right: 4px;">{{ $t('search') }}</span></a-button>
          </a-input-group>
        </a-col>
        <a-col :span="12" style="display: flex;justify-content: flex-end;align-items: center;">
          <span>{{ $t("公司") }}:</span>
          <span style="color: #ff6700;margin: 0 8px;"> {{ companyName }}</span>
          <a-dropdown>
            <i class="fa fa fa-angle-down fa-2x" @click.prevent />
            <template #overlay>
              <a-menu class="menu-list">
                <a-menu-item v-for="(item, index) in menuList" @click="onSwitch(item.id)">{{ item.name }}</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-col>
      </a-row>
      <!-- 数据展示 -->
      <Table
        ref="Tabular"
        :tableDatas="dataSource"
        :loading="loading"
        :pages="pages"
        :total="total"
        :columns="columns"
        @search="handleSearch"
      >
        <template #status="{ row, index }">
          <span>{{ row.status === 1 ? $t("有效") : $t("无效") }}</span>
        </template>
        <template #operation="{ row, index }">
            <i class="far fa-edit"  v-permission="['modifyFlag']" style="margin-right: 8px;cursor:pointer;" @click="handleUpdate(row)"/>
            <a-popconfirm
              :title="$t('你确定要删除吗')"
              :ok-text="$t('确定')"
              :cancel-text="$t('取消')"
              @confirm="handleDelete(row, index)"
              @cancel="cancel"
            >
              <i class="far fa-trash-alt" v-permission="['removeFlag']" style="margin-right: 8px;cursor:pointer;color: red;"/>
            </a-popconfirm>
        </template>
      </Table>
  
      <serviceOrderModal ref="child" @refreshList="refreshList"/>
  
    </div>
  </template>
  <script setup lang="ts">
    import { h } from 'vue';
    import Table from "@/components/Table/index.vue";
    import { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
    import serviceOrderModal from './components/service-order-modal.vue'
    import { GetEnterpriseList, GetOrganizationServiceOrderList, DeleteOrganizationServiceOrder } from "@/api/organization/index";
    import { Modal, message } from 'ant-design-vue';
    import { useI18n } from 'vue-i18n';
    const { t: $t } = useI18n();
    let loading = ref(false)
    let dataSource = ref([])
    const columns = [
      {
        title: () => {
          return (
            $t('编号')
          )
        },
        dataIndex: 'soNo',
        align: 'left'
      },
      {
        title: () => {
          return (
            $t('名字')
          )
        },
        dataIndex: 'name',
        align: 'left'
      },
      {
        title: () => {
          return (
            $t('开始日期')
          )
        },
        dataIndex: 'beginDate',
        align: 'center'
      },
      {
        title: () => {
          return (
            $t('结束日期')
          )
        },
        dataIndex: 'endDate',
        align: 'center'
      },
      {
        title: () => {
          return (
            $t('状态')
          )
        },
        dataIndex: 'status',
        slot: "status",
        align: 'center'
      },
      {
        title: () => {
          return (
            $t('备注')
          )
        },
        dataIndex: 'remark',
        ellipsis: true,
        align: 'left'
      },
      {
        title: '',
        dataIndex: 'operation',
        slot: "operation",
        width: 200
      }
    ]
    let queryParam = ref({
      keyword: null
    })
    let pages = ref<object>({ pageSize: 30, pageNo: 1 });
    let total = ref(20);
    let Tabular = ref(null);
    const menuList = ref([])
    const companyId = ref(null)
    const companyName = ref(null)
    const getMenuList = () => {
        GetEnterpriseList().then(res => {
            if (res.code !== 200) return
            menuList.value = res.data
            companyId.value = menuList.value[0].id
            companyName.value = `${menuList.value[0].shortName}-${menuList.value[0].name}`
            getPageList(menuList.value[0].id)
        })
    }
    const handleSearch = ({searchForm, pager }) => {
      pages.value.pageSize = pager.pageSize;
      pages.value.pageNo = pager.pageNo;
      getPageList()
    }
    
    // 公司切换
    const onSwitch = (id) => {
        let companyObj = menuList.value.find(item => item.id === id)
        companyId.value = id
        companyName.value = `${companyObj.shortName}-${companyObj.name}`
        getPageList(id)
    }
    const getPageList = (id: any) => {
      loading.value = true
      GetOrganizationServiceOrderList({
        ...pages.value,
        keyword: queryParam.value.keyword,
        enterpriseId: id || companyId.value,
      }).then((res) => {
        if (res.code !== 200) return
        dataSource.value = res.data
        total.value = res.totalCount;
        pages.value.pageSize = res.pageSize;
        pages.value.pageNo = res.pageNo;
      }).finally(() => {
        loading.value = false
      });
    }
    onMounted(() => {
        getMenuList()
    })
    const handleDelete = (record: {}, index: any) => {
        DeleteOrganizationServiceOrder({
        uuid: record.uuid
      }).then(res => {
        if (res.code !== 200) return message.warning($t('操作失败'));
        message.success($t('操作成功'));
        handleFlush()
      })
    }
    
    const onSearch = debounce((evt) => {
      // ---- ^ 业务逻辑 ----
      // 定义fn方法
      const fn = (evt) => {
        pages.value.pageSize = 30;
        pages.value.pageNo = 1;
        getPageList()
      }
      // 调用fn方法
      fn(evt)
      // ---- / 业务逻辑 ----
    }, 1000)
    const refreshList = () => {
      handleFlush()
    }
    const handleFlush = () => {
      Tabular.value.flush();
    };
    // --------- 新增编辑 ---------------------
    const child = ref(null)
    const onAddClick = () => {
      if (child.value) child.value.showModal(companyId.value)
    }
    const handleUpdate = (record: {}) => {
      child.value.showModal(companyId.value, record)
    }
  </script>
  <style lang="scss" scoped>
  .company {
    padding: 24px 24px 0 16px;
  }
  .pagination-left {
    color: #676a6c;
  }
  .search {
    height: 32.86px;
    background-color: #fff;
    color: #676a6c;
    border: 1px solid #d9d9d9;
    border-radius: 0 3px 3px 0;
  }
  ::v-deep {
    .ant-table-wrapper  .ant-table {
      font-size: 12px !important;
    }
    // 全局样式修改回来
    .ant-input-affix-wrapper {
      border: 1px solid #dadada !important;
      height: 100%;
    }
    .ant-input:hover,
    .ant-input {
      border-bottom: none !important;
    }
    .ant-input-affix-wrapper >input.ant-input {
      padding: 4px 11px;
    }
    .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
      border-color: var(--btn-bg-save) !important;
    }
    .ant-input-affix-wrapper-focused,
    .ant-input-affix-wrapper:hover,
    .ant-input-affix-wrapper:focus {
      border-color: var(--btn-bg-save) !important;
    }
    .ant-input-affix-wrapper:focus {
      border: 1px solid #d9d9d9 !important;
    }
    .ant-input-affix-wrapper:hover {
      border: 1px solid #d9d9d9 !important;
    }
    .ant-input-affix-wrapper .ant-input-suffix {
      padding-right: 4px;
    }
    .ant-input-group.ant-input-group-compact>*:first-child {
      border-start-start-radius: 3px;
      border-end-start-radius: 3px;
    }
    .ant-input-group.ant-input-group-compact>*:last-child {
      border-start-end-radius: 3px;
      border-end-end-radius: 3px;
    }
  }
  </style>
  